<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Creative - Bootstrap 3 Responsive Admin Template">
    <meta name="author" content="GeeksLabs">
    <meta name="keyword" content="Creative, Dashboard, Admin, Template, Theme, Bootstrap, Responsive, Retina, Minimal">
    <link rel="shortcut icon" href="/static/img/favicon.png">

    <title>Button | Creative - Bootstrap 3 Responsive Admin Template</title>

    <!-- Bootstrap CSS -->    
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <!-- bootstrap theme -->
    <link href="/static/css/bootstrap-theme.css" rel="stylesheet">
    <!--external css-->
    <!-- font icon -->
    <link href="/static/css/elegant-icons-style.css" rel="stylesheet" />
    <link href="/static/css/font-awesome.min.css" rel="stylesheet" />
    <!-- Custom styles -->
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/style-responsive.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 -->
    <!--[if lt IE 9]>
      <script src="/static/js/html5shiv.js"></script>
      <script src="/static/js/respond.min.js"></script>
      <script src="/static/js/lte-ie7.js"></script>
    <![endif]-->
  </head>

  <body>
  <!-- container section start -->
  <section id="container" class="">

      <!--header start-->
      
      <header class="header dark-bg">
            <div class="toggle-nav">
                <div class="icon-reorder tooltips" data-original-title="Toggle Navigation" data-placement="bottom"></div>
            </div>

            <!--logo start-->
            <a href="index.html" class="logo">Nice <span class="lite">Admin</span></a>
            <!--logo end-->

            <div class="nav search-row" id="top_menu">
                <!--  search form start -->
                <ul class="nav top-menu">                    
                    <li>
                        <form class="navbar-form">
                            <input class="form-control" placeholder="Search" type="text">
                        </form>
                    </li>                    
                </ul>
                <!--  search form end -->                
            </div>

            <div class="top-nav notification-row">                
                <!-- notificatoin dropdown start-->
                <ul class="nav pull-right top-menu">
                    
                    <!-- task notificatoin start -->
                    <li id="task_notificatoin_bar" class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="icon-task-l"></i>
                            <span class="badge bg-important">5</span>
                        </a>
                        <ul class="dropdown-menu extended tasks-bar">
                            <div class="notify-arrow notify-arrow-blue"></div>
                            <li>
                                <p class="blue">You have 5 pending tasks</p>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Design PSD </div>
                                        <div class="percent">90%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
                                            <span class="sr-only">90% Complete (success)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">
                                            Project 1
                                        </div>
                                        <div class="percent">30%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
                                            <span class="sr-only">30% Complete (warning)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Digital Marketing</div>
                                        <div class="percent">80%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                            <span class="sr-only">80% Complete</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Logo Designing</div>
                                        <div class="percent">78%</div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%">
                                            <span class="sr-only">78% Complete (danger)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Mobile App</div>
                                        <div class="percent">50%</div>
                                    </div>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar"  role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
                                            <span class="sr-only">50% Complete</span>
                                        </div>
                                    </div>

                                </a>
                            </li>
                            <li class="external">
                                <a href="#">See All Tasks</a>
                            </li>
                        </ul>
                    </li>
                    <!-- task notificatoin end -->
                    <!-- inbox notificatoin start-->
                    <li id="mail_notificatoin_bar" class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="icon-envelope-l"></i>
                            <span class="badge bg-important">5</span>
                        </a>
                        <ul class="dropdown-menu extended inbox">
                            <div class="notify-arrow notify-arrow-blue"></div>
                            <li>
                                <p class="blue">You have 5 new messages</p>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="photo"><img alt="avatar" src=".//static/img/avatar-mini.jpg"></span>
                                    <span class="subject">
                                    <span class="from">Greg  Martin</span>
                                    <span class="time">1 min</span>
                                    </span>
                                    <span class="message">
                                        I really like this admin panel.
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="photo"><img alt="avatar" src=".//static/img/avatar-mini2.jpg"></span>
                                    <span class="subject">
                                    <span class="from">Bob   Mckenzie</span>
                                    <span class="time">5 mins</span>
                                    </span>
                                    <span class="message">
                                     Hi, What is next project plan?
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="photo"><img alt="avatar" src=".//static/img/avatar-mini3.jpg"></span>
                                    <span class="subject">
                                    <span class="from">Phillip   Park</span>
                                    <span class="time">2 hrs</span>
                                    </span>
                                    <span class="message">
                                        I am like to buy this Admin Template.
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="photo"><img alt="avatar" src=".//static/img/avatar-mini4.jpg"></span>
                                    <span class="subject">
                                    <span class="from">Ray   Munoz</span>
                                    <span class="time">1 day</span>
                                    </span>
                                    <span class="message">
                                        Icon fonts are great.
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">See all messages</a>
                            </li>
                        </ul>
                    </li>
                    <!-- inbox notificatoin end -->
                    <!-- alert notification start-->
                    <li id="alert_notificatoin_bar" class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">

                            <i class="icon-bell-l"></i>
                            <span class="badge bg-important">7</span>
                        </a>
                        <ul class="dropdown-menu extended notification">
                            <div class="notify-arrow notify-arrow-blue"></div>
                            <li>
                                <p class="blue">You have 4 new notifications</p>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary"><i class="icon_profile"></i></span> 
                                    Friend Request
                                    <span class="small italic pull-right">5 mins</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-warning"><i class="icon_pin"></i></span>  
                                    John location.
                                    <span class="small italic pull-right">50 mins</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-danger"><i class="icon_book_alt"></i></span> 
                                    Project 3 Completed.
                                    <span class="small italic pull-right">1 hr</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success"><i class="icon_like"></i></span> 
                                    Mick appreciated your work.
                                    <span class="small italic pull-right"> Today</span>
                                </a>
                            </li>                            
                            <li>
                                <a href="#">See all notifications</a>
                            </li>
                        </ul>
                    </li>
                    <!-- alert notification end-->
                    <!-- user login dropdown start-->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="profile-ava">
                                <img alt="" src="/static/img/avatar1_small.jpg">
                            </span>
                            <span class="username">Jenifer Smith</span>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu extended logout">
                            <div class="log-arrow-up"></div>
                            <li class="eborder-top">
                                <a href="#"><i class="icon_profile"></i> My Profile</a>
                            </li>
                            <li>
                                <a href="#"><i class="icon_mail_alt"></i> My Inbox</a>
                            </li>
                            <li>
                                <a href="#"><i class="icon_clock_alt"></i> Timeline</a>
                            </li>
                            <li>
                                <a href="#"><i class="icon_chat_alt"></i> Chats</a>
                            </li>
                            <li>
                                <a href="login.html"><i class="icon_key_alt"></i> Log Out</a>
                            </li>
                            <li>
                                <a href="documentation.html"><i class="icon_key_alt"></i> Documentation</a>
                            </li>
                            <li>
                                <a href="documentation.html"><i class="icon_key_alt"></i> Documentation</a>
                            </li>
                        </ul>
                    </li>
                    <!-- user login dropdown end -->
                </ul>
                <!-- notificatoin dropdown end-->
            </div>
      </header>      
      <!--header end-->

      <!--sidebar start-->
      <aside>
          <div id="sidebar"  class="nav-collapse ">
              <!-- sidebar menu start-->
              <ul class="sidebar-menu">                
                  <li class="active">
                      <a class="" href="index.html">
                          <i class="icon_house_alt"></i>
                          <span>Dashboard</span>
                      </a>
                  </li>
				  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="icon_document_alt"></i>
                          <span>Forms</span>
                          <span class="menu-arrow arrow_carrot-right"></span>
                      </a>
                      <ul class="sub">
                          <li><a class="" href="form_component.html">Form Elements</a></li>                          
                          <li><a class="" href="form_validation.html">Form Validation</a></li>
                      </ul>
                  </li>       
                  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="icon_desktop"></i>
                          <span>UI Fitures</span>
                          <span class="menu-arrow arrow_carrot-right"></span>
                      </a>
                      <ul class="sub">
                          <li><a class="" href="general.html">Components</a></li>
                          <li><a class="" href="buttons.html">Buttons</a></li>
                          <li><a class="" href="grids.html">Grids</a></li>
                      </ul>
                  </li>
                  <li>
                      <a class="" href="widgets.html">
                          <i class="icon_genius"></i>
                          <span>Widgets</span>
                      </a>
                  </li>
                  <li>                     
                      <a class="" href="chart-chartjs.html">
                          <i class="icon_piechart"></i>
                          <span>Charts</span>
                          
                      </a>
                                         
                  </li>
                             
                  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="icon_table"></i>
                          <span>Tables</span>
                          <span class="menu-arrow arrow_carrot-right"></span>
                      </a>
                      <ul class="sub">
                          <li><a class="" href="basic_table.html">Basic Table</a></li>
                      </ul>
                  </li>
                  
                  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="icon_documents_alt"></i>
                          <span>Pages</span>
                          <span class="menu-arrow arrow_carrot-right"></span>
                      </a>
                      <ul class="sub">                          
                          <li><a class="" href="profile.html">Profile</a></li>
                          <li><a class="" href="login.html"><span>Login Page</span></a></li>
                          <li><a class="" href="blank.html">Blank Page</a></li>
                          <li><a class="" href="404.html">404 Error</a></li>
                      </ul>
                  </li>
                  
              </ul>
              <!-- sidebar menu end-->
          </div>
      </aside>
      <!--sidebar end-->

      <!--main content start-->
      <section id="main-content">
          <section class="wrapper">
		  <div class="row">
				<div class="col-lg-12">
					<h3 class="page-header"><i class="fa fa-th"></i>Button</h3>
					<ol class="breadcrumb">
						<li><i class="fa fa-home"></i><a href="index.html">Home</a></li>
						<li><i class="fa fa-desktop"></i>UI Fitures</li>
						<li><i class="fa fa-th"></i>button</li>
					</ol>
				</div>
			</div>
              <div class="row">
                <div class="col-md-12">
                    <section class="panel">
                          <header class="panel-heading">
                              <h3>Buttons</h3>
                              
                          </header>
                    <div class="panel-body">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Button</th>
                                    <th>Large Button</th>
                                    <th>Small Button</th>
                                    <th>Disabled Button</th>
                                    <th>Button with Icon</th>
                                    <th>Split Button</th>
                                </tr>
                            </thead>
                                <tbody>
                                    <tr>
                                        <td><a class="btn btn-default" href="" title="Bootstrap 3 themes generator">Default</a></td>
                                        <td><a class="btn btn-default btn-lg" href="" title="Bootstrap 3 themes generator">Default</a></td>
                                        <td><a class="btn btn-default btn-sm" href="" title="Bootstrap 3 themes generator">Default</a></td>
                                        <td><a class="btn btn-default disabled" href="" title="Bootstrap 3 themes generator">Default</a></td>
                                        <td><a class="btn btn-default" href="" title="Bootstrap 3 themes generator">
                                        <span class="icon_cloud-upload_alt"></span> Default</a></td>
                                        <td>
                                            <div class="btn-group">
                                                  <a class="btn btn-default" href="" title="Bootstrap 3 themes generator">Default</a>
                                                  <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="" title="Bootstrap 3 themes generator"><span class="caret"></span></a>
                                                  <ul class="dropdown-menu">
                                                    <li><a href="" title="Bootstrap 3 themes generator">Action</a></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Another action</a></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Separated link</a></li>
                                                  </ul>
                                            </div><!-- /btn-group -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><a class="btn btn-primary" href="" title="Bootstrap 3 themes generator">Primary</a></td>
                                        <td><a class="btn btn-primary btn-lg" href="" title="Bootstrap 3 themes generator">Primary</a></td>
                                        <td><a class="btn btn-primary btn-sm" href="" title="Bootstrap 3 themes generator">Primary</a></td>
                                        <td><a class="btn btn-primary disabled" href="" title="Bootstrap 3 themes generator">Primary</a></td>
                                        <td><a class="btn btn-primary" href="" title="Bootstrap 3 themes generator"><span class="icon_lightbulb_alt"></span> Primary</a></td>
                                        <td>
                                            <div class="btn-group">
                                                  <a class="btn btn-primary" href="" title="Bootstrap 3 themes generator">Primary</a>
                                                  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="" title="Bootstrap 3 themes generator"><span class="caret"></span></a>
                                                  <ul class="dropdown-menu">
                                                    <li><a href="" title="Bootstrap 3 themes generator">Action</a></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Another action</a></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Separated link</a></li>
                                                  </ul>
                                            </div><!-- /btn-group -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><a class="btn btn-info" href="" title="Bootstrap 3 themes generator">Info</a></td>
                                        <td><a class="btn btn-info btn-lg" href="" title="Bootstrap 3 themes generator">Info</a></td>
                                        <td><a class="btn btn-info btn-sm" href="" title="Bootstrap 3 themes generator">Info</a></td>
                                        <td><a class="btn btn-info disabled" href="" title="Bootstrap 3 themes generator">Info</a></td>
                                        <td><a class="btn btn-info" href="" title="Bootstrap 3 themes generator"><span class="icon_house_alt"></span> Info</a></td>
                                        <td>
                                            <div class="btn-group">
                                                  <a class="btn btn-info" href="" title="Bootstrap 3 themes generator">Info</a>
                                                  <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="" title="Bootstrap 3 themes generator"><span class="caret"></span></a>
                                                  <ul class="dropdown-menu">
                                                    <li><a href="" title="Bootstrap 3 themes generator">Action</a></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Another action</a></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Separated link</a></li>
                                                  </ul>
                                            </div><!-- /btn-group -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><a class="btn btn-success" href="" title="Bootstrap 3 themes generator">Success</a></td>
                                        <td><a class="btn btn-success btn-lg" href="" title="Bootstrap 3 themes generator">Success</a></td>
                                        <td><a class="btn btn-success btn-sm" href="" title="Bootstrap 3 themes generator">Success</a></td>
                                        <td><a class="btn btn-success disabled" href="" title="Bootstrap 3 themes generator">Success</a></td>
                                        <td><a class="btn btn-success" href="" title="Bootstrap 3 themes generator"><span class="icon_mic_alt"></span> Success</a></td>
                                        <td>
                                            <div class="btn-group">
                                                  <a class="btn btn-success" href="" title="Bootstrap 3 themes generator">Success</a>
                                                  <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="" title="Bootstrap 3 themes generator"><span class="caret"></span></a>
                                                  <ul class="dropdown-menu">
                                                    <li><a href="" title="Bootstrap 3 themes generator">Action</a></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Another action</a></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Separated link</a></li>
                                                  </ul>
                                            </div><!-- /btn-group -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><a class="btn btn-warning" href="" title="Bootstrap 3 themes generator">Warning</a></td>
                                        <td><a class="btn btn-warning btn-lg" href="" title="Bootstrap 3 themes generator">Warning</a></td>
                                        <td><a class="btn btn-warning btn-sm" href="" title="Bootstrap 3 themes generator">Warning</a></td>
                                        <td><a class="btn btn-warning disabled" href="" title="Bootstrap 3 themes generator">Warning</a></td>
                                        <td><a class="btn btn-warning" href="" title="Bootstrap 3 themes generator"><span class="icon_pin_alt"></span> Warning</a></td>
                                        <td>
                                            <div class="btn-group">
                                                  <a class="btn btn-warning" href="" title="Bootstrap 3 themes generator">Warning</a>
                                                  <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="" title="Bootstrap 3 themes generator"><span class="caret"></span></a>
                                                  <ul class="dropdown-menu">
                                                    <li><a href="" title="Bootstrap 3 themes generator">Action</a></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Another action</a></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Separated link</a></li>
                                                  </ul>
                                            </div><!-- /btn-group -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><a class="btn btn-danger" href="" title="Bootstrap 3 themes generator">Danger</a></td>
                                        <td><a class="btn btn-danger btn-lg" href="" title="Bootstrap 3 themes generator">Danger</a></td>
                                        <td><a class="btn btn-danger btn-sm" href="" title="Bootstrap 3 themes generator">Danger</a></td>
                                        <td><a class="btn btn-danger disabled" href="" title="Bootstrap 3 themes generator">Danger</a></td>
                                        <td><a class="btn btn-danger" href="" title="Bootstrap 3 themes generator"><span class="icon_target"></span> Danger</a></td>
                                        <td>
                                            <div class="btn-group">
                                                  <a class="btn btn-danger" href="" title="Bootstrap 3 themes generator">Danger</a>
                                                  <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="" title="Bootstrap 3 themes generator"><span class="caret"></span></a>
                                                  <ul class="dropdown-menu">
                                                    <li><a href="" title="Bootstrap 3 themes generator">Action</a></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Another action</a></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="" title="Bootstrap 3 themes generator">Separated link</a></li>
                                                  </ul>
                                            </div><!-- /btn-group -->
                                        </td>
                                    </tr>
                                    
                                </tbody>
                        </table>
                    </div>
                    </section>
                </div>
              </div>
              <!-- page start-->              

              <div class="row">
                  <div class="col-sm-6">
                      <section class="panel">
                          <header class="panel-heading">
                              Group Checkbox
                          </header>
                          <div class="panel-body">
                              <div class="btn-row">
                                  <div class="btn-group" data-toggle="buttons">
                                      <label class="btn btn-primary">
                                          <input type="checkbox"> Option 1
                                      </label>
                                      <label class="btn btn-primary active">
                                          <input type="checkbox"> Option 2
                                      </label>
                                      <label class="btn btn-primary">
                                          <input type="checkbox"> Option 3
                                      </label>
                                  </div>
                              </div>
                              <div class="btn-row">
                                  <div class="btn-group" data-toggle="buttons">
                                      <label class="btn btn-danger active">
                                          <input type="checkbox"> Option 1
                                      </label>
                                      <label class="btn btn-danger">
                                          <input type="checkbox"> Option 2
                                      </label>
                                      <label class="btn btn-danger">
                                          <input type="checkbox"> Option 3
                                      </label>
                                  </div>
                              </div>
                              <div class="btn-row">
                                  <div class="btn-group" data-toggle="buttons">
                                      <label class="btn btn-info">
                                          <input type="checkbox"> Option 1
                                      </label>
                                      <label class="btn btn-info">
                                          <input type="checkbox"> Option 2
                                      </label>
                                      <label class="btn btn-info active">
                                          <input type="checkbox"> Option 3
                                      </label>
                                  </div>
                              </div>
                            </div>
                        </section>
                        <section class="panel">
                          <header class="panel-heading">
                              Group Radio
                          </header>
                          <div class="panel-body">
                            <div class="btn-row">
                                <div class="btn-group" data-toggle="buttons">
                                      <label class="btn btn-default active">
                                          <input type="radio" name="options" id="option1"> Option 1
                                      </label>
                                      <label class="btn btn-default">
                                          <input type="radio" name="options" id="option2"> Option 2
                                      </label>
                                      <label class="btn btn-default">
                                          <input type="radio" name="options" id="option3"> Option 3
                                      </label>
                                  </div>
                              </div>                            
                             <div class="btn-row">
                                  <div class="btn-group" data-toggle="buttons">
                                      <label class="btn btn-primary">
                                          <input type="radio" name="options" id="option1"> Option 1
                                      </label>
                                      <label class="btn btn-primary active">
                                          <input type="radio" name="options" id="option2"> Option 2
                                      </label>
                                      <label class="btn btn-primary">
                                          <input type="radio" name="options" id="option3"> Option 3
                                      </label>
                                  </div>
                            </div>
                            <div class="btn-row">
                                  <div class="btn-group" data-toggle="buttons">
                                      <label class="btn btn-danger">
                                          <input type="radio" name="options" id="option1"> Option 1
                                      </label>
                                      <label class="btn btn-danger">
                                          <input type="radio" name="options" id="option2"> Option 2
                                      </label>
                                      <label class="btn btn-danger active">
                                          <input type="radio" name="options" id="option3"> Option 3
                                      </label>
                                  </div>
                            </div>
                            <div class="btn-row">
                                  <div class="btn-group" data-toggle="buttons">
                                      <label class="btn btn-info">
                                          <input type="radio" name="options" id="option1"> Option 1
                                      </label>
                                      <label class="btn btn-info active">
                                          <input type="radio" name="options" id="option2"> Option 2
                                      </label>
                                      <label class="btn btn-info">
                                          <input type="radio" name="options" id="option3"> Option 3
                                      </label>
                                  </div>
                            </div>
                            </div>
                        </section>
                      <section class="panel">
                          <header class="panel-heading">
                              Block level button
                          </header>
                          <div class="panel-body">
                              <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
                              <button type="button" class="btn btn-warning btn-block">Block level button</button>
                              <button type="button" class="btn btn-danger btn-xs btn-block">Block level button</button>
                          </div>
                      </section>
                      <section class="panel">
                          <header class="panel-heading">
                              Justified Button groups
                          </header>
                          <div class="panel-body">
                              <div class="btn-group btn-group-justified">
                                  <a class="btn btn-primary" href="#">Left</a>
                                  <a class="btn btn-success" href="#">Left</a>
                                  <a class="btn btn-info" href="#">Middle</a>
                                  <a class="btn btn-warning" href="#">Middle</a>
                                  <a class="btn btn-danger" href="#">Right</a>
                              </div>
                          </div>                                              
                      </section>                      
                  </div>
                  <div class="col-sm-6">                      
                      <section class="panel">
                          <header class="panel-heading">
                              Group Buttons
                          </header>
                          <div class="panel-body">
                                <div class="btn-row">
                                    <div class="btn-group">
                                      <button type="button" class="btn btn-default">Left</button>
                                      <button type="button" class="btn btn-default">Middle</button>
                                      <button type="button" class="btn btn-default">Right</button>
                                    </div>
                                </div>
                                <div class="btn-row">
                                    <div class="btn-group">
                                      <button type="button" class="btn btn-primary">Left</button>
                                      <button type="button" class="btn btn-primary">Middle</button>
                                      <button type="button" class="btn btn-primary">Right</button>
                                    </div>
                                </div>
                                <div class="btn-row">
                                    <div class="btn-group">
                                      <button type="button" class="btn btn-danger">Left</button>
                                      <button type="button" class="btn btn-danger">Middle</button>
                                      <button type="button" class="btn btn-danger">Right</button>
                                    </div>
                                </div>                              
                              <p class="">Vertical button groups</p>
                              <div class="btn-row">
                                  <div class="btn-group-vertical">
                                      <button class="btn btn-default" type="button">Top</button>
                                      <button class="btn btn-default" type="button">Middle</button>
                                      <button class="btn btn-default" type="button">Bottom</button>
                                  </div>
                              </div>
                              <div class="btn-row">
                                  <div class="btn-group-vertical">
                                      <button class="btn btn-primary" type="button">Top</button>
                                      <button class="btn btn-primary" type="button">Middle</button>
                                      <button class="btn btn-primary" type="button">Bottom</button>
                                  </div>
                              </div>
                              <p class="">Nested button groups</p>
                              <div class="btn-row">
                                  <div class="btn-group">
                                      <button class="btn btn-default" type="button">1</button>
                                      <button class="btn btn-primary" type="button">2</button>
                                      <button class="btn btn-default" type="button">3</button>
                                      <button class="btn btn-default" type="button">4</button>
                                      <div class="btn-group">
                                          <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"> Dropdown <span class="caret"></span> </button>
                                          <ul class="dropdown-menu">
                                              <li><a href="#">Dropdown link 1</a></li>
                                              <li><a href="#">Dropdown link 2</a></li>
                                              <li><a href="#">Dropdown link 3</a></li>
                                          </ul>
                                      </div>
                                  </div>
                              </div>
                              <p class="">Vertical variation</p>
                              <div class="btn-group-vertical">
                                <button type="button" class="btn btn-default">Button</button>                                
                                <div class="btn-group">
                                  <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    Dropdown
                                    <span class="caret"></span>
                                  </button>
                                  <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
                                    <li><a href="#">Dropdown link</a></li>
                                    <li><a href="#">Dropdown link</a></li>
                                  </ul>
                                </div>
                                <button type="button" class="btn btn-default">Button</button>                                
                                <div class="btn-group">
                                  <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    Dropdown
                                    <span class="caret"></span>
                                  </button>
                                  <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
                                    <li><a href="#">Dropdown link</a></li>
                                    <li><a href="#">Dropdown link</a></li>
                                  </ul>
                                </div>
                                <div class="btn-group">
                                  <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    Dropdown
                                    <span class="caret"></span>
                                  </button>
                                  <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
                                    <li><a href="#">Dropdown link</a></li>
                                    <li><a href="#">Dropdown link</a></li>
                                  </ul>
                                </div>
                              </div>

                              <p class="">Multiple button groups</p>
                              <div class="btn-row">
                                  <div class="btn-toolbar">
                                      <div class="btn-group">
                                          <button class="btn btn-info" type="button">1</button>
                                          <button class="btn btn-info active" type="button">2</button>
                                          <button class="btn btn-info" type="button">3</button>
                                          <button class="btn btn-info" type="button">4</button>
                                      </div>
                                      <div class="btn-group">
                                          <button class="btn btn-success" type="button">5</button>
                                          <button class="btn btn-success" type="button">6</button>
                                          <button class="btn btn-success" type="button">7</button>
                                      </div>
                                      <div class="btn-group">
                                          <button class="btn btn-warning" type="button">8</button>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </section>
                  </div>
              </div>
              <!-- page end-->
          </section>
      </section>
      <!--main content end-->
  </section>
  <!-- container section end -->
    <!-- javascripts -->
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <!-- nice scroll -->
    <script src="/static/js/jquery.scrollTo.min.js"></script>
    <script src="/static/js/jquery.nicescroll.js" type="text/javascript"></script>
    <!--custome script for all page-->
    <script src="/static/js/scripts.js"></script>


  </body>
</html>
